<template>
  <div class="form">
    <link-area/>
    <h1>Form</h1>
    <form>
      <label for="welcome">修改欢迎信息：</label>
      <input id="welcome" class="welcome" type="text" spellcheck="false" v-model="welcome">
    </form>
  </div>
</template>


<script>
  import LinkArea from '@/components/LinkArea'

  export default {
    name: 'Form',
    components: {
      LinkArea
    },
    computed: {
      welcome: {
        get () {
          return this.$store.state.welcome.text
        },
        set (value) {
          this.$store.dispatch('welcome/setText', value)
        }
      }
    }
  }
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  .form {
    flex: 1;
  }

  .welcome {
    width: 600px;
  }
</style>
